<template>
  <basic-container :btnFlag = true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-collapse v-model="activeNames" @change="handleChange" style="margin-top:2rem;">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">基本信息</div>
            </div>
          </template>
          <bostech-detail :detail-data="detailData"></bostech-detail>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">规划信息</div>
            </div>
          </template>
          <div style="margin-top: 50px;margin-left: 10px;">
            <avue-crud
              :data="tableData"
              :option="option"
              :page="page"
              :table-loading="tableLoading"
              style="margin-top: -60px;"
            >
              <template slot-scope="scope" slot="menu">
                <div class="menu-title" @click.stop="detailApplication(scope.row,scope.index)">
                  <i class="iconfont iconview" style="color: #409EFF;"></i>
                  <p class="menu-title-text">详情</p>
                </div>
              </template>
            </avue-crud>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div class="consult-button">
        <el-button type="warning" size="small" @click.stop="commitList()">清单上报</el-button>
        <el-button type="info" size="small" @click.stop="goback()">关闭</el-button>
      </div>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <h2 style="text-align: center;">是否上报政府</h2>
        <span slot="footer" class="dialog-footer">
            <el-button @click="notReport">否</el-button>
            <el-button type="primary" @click="commitYes">是</el-button>
          </span>
      </el-dialog>
    </div>
  </basic-container>
</template>
<script>
import {projectRegister} from "@/api/planning/project";
import {getbasisinfo} from "@/api/planning/detailList";
import {listReport} from "@/api/planning/detailList";
import {notReport} from "@/api/planning/detailList";
import { PROJECT_DIC } from "@/const/dict";
export default {
  name: "listReport",
  data() {
    return {
      dialogVisible: false,
      headerData:{
        title:'清单上报'
      },
      activeNames: ["1","2"],
      detailData:[],
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      option: {
        page: true,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: true,
        indexWidth:70,
        cellBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        keyId: "id",
        column: [
          {
            label: "规划名称",
            width: 240,
            prop: "title",
            cell: true
          },
          // {
          //   label: "规划期限",
          //   prop: "startEnd",
          //   cell: true,
          //   formatter: function (row, value, label, column) {
          //     return row.startDate + '-' + row.endDate;
          //   }
          // },
          {
            label: "申报(牵头)单位",
            prop: "orgCode",
            type: "select",
            dicData: PROJECT_DIC.ORG_CODE,
            cell: true
          },
          {
            label: "规划类型",
            prop: "category",
            type: "select",
            dicData: PROJECT_DIC.CATEGORY,
            cell: true
          }
        ]
      },
    };
  },
  mounted() {
    this.taskId = this.$route.params.id;
    this.getbasisinfo();
  },
  methods: {
    handleChange(val) {
    },
    // 返回上一页
    goback(){
      this.$router.go(-1);
    },
    commitList(){
      this.dialogVisible = true;
    },
    commitYes(){
      this.listReport();
    },
    // 清单上报
    listReport(){
      listReport(this.taskId).then(response => {
        if(response.data.code == 0){
          this.$notify({
            title: '成功',
            message: '上报成功',
            type: 'success',
            duration: 2000
          });
          this.$router.go(-1);
        }
      })
    },
    // 立项详情
    detailApplication(row, index){
      let src = `/regDetail/detail/${row.registerinfoId}`;
      this.$router.push({
        path: src
      })
    },
    // 获取详情信息
    getbasisinfo(){
      getbasisinfo(this.$route.query.listId).then(response => {
        var detailObj = response.data.data;
        this.detailData = [{label: '清单标题', value:detailObj.title },{label: '清单说明', value:detailObj.description, newline: true }];
        this.tableData = detailObj.planningRegisterinfoList;
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    notReport(){
      notReport(this.taskId).then(response => {
        if(response.data.code == 0){
          this.dialogVisible = false;
          this.$notify({
            title: '成功',
            message: '成功',
            type: 'success',
            duration: 2000
          });
          this.$router.go(-1);
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 20px;
  width: 480px;
}
.head-title {
  color: rgb(2, 2, 2);
  text-align: left;
  display: inline;
  font-weight: 600;
}
.collapse-title{
  font-size:1rem;
}
.head-explain {
  color: #333;
  text-align: left;
  display: inline;
  font-size: 14px;
  font-weight: 600;
}
.form-group {
  padding: 20px;
}
.form-label {
  font-weight: 600;
  display: inline-block;
  width: 140px;
}
.collapse-header {
  display: inline-block;
  width: 94%;
}

.consult-button {
  margin: 2rem 0;
  text-align: center;
}
</style>
